<template>
  <div class="model-container" v-show="info.isShow">
    <h3>弹窗</h3>
    <div>姓名:<input type="text" required v-model="newUser.name" /></div>
    <div>
      性别:<input
        type="radio"
        value="male"
        name="sex"
        v-model="newUser.sex"
      />男
      <input type="radio" value="femail" name="female" v-model="newUser.sex" />女
    </div>
    <div>年龄:<input type="number" required v-model="newUser.age" /></div>

    <div class="model-btn">
      <button @click="submit">提交</button>
      <button @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      newUser: {
        name: "",
        sex: "male",
        age: "",
      },
    };
  },
  created() {},

  methods: {
    cancel() {
      this.info.isShow = false;
      this.info.isEdit = false;
       this.newUser = {
          name: "",
          sex: "male",
          age: 18,
        }
    },
    submit() {
      
        for (let key in this.newUser) {
          if (this.newUser[key] == "") {
            alert(key + "不得为空");
            return;
          }
        }

        this.$emit("submit", this.newUser);
        this.newUser = {
          name: "",
          sex: "male",
          age: 18,
        }
      
    },
     sendItem(item){
        
        let obj = {...item}
        this.newUser = obj
    }
  },
  components: {},
};
</script>
<style scoped>
.model-container {
  width: 300px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 5px #000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 20px;
}
.model-btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>